<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../../react资料_stu/依赖包/babel.min.js"></script>
</head>

<body>
  <!-- react操作的容器 -->
  <div id="app">

  </div>
</body>
<script type="text/babel">


  /* 
        porps是用来做父子组件通信的
          - 在父组件中使用子组件的时候,可以给子组件添加属性
          - 在子组件中组件实例的props属性上,就能拿到这个属性和值
  */

  class App extends React.Component {
    //这是ajax请求到的数据
    state = {
      person: [{
        name: "xiaoA", age: 18, high: 150, id: 111
      }, {
        name: "xiaoB", age: 22, high: 160, id: 22
      }, {
        name: "xiaoC", age: 33, high: 190, id: 33
      }]
    }




    render() {
      const { person } = this.state

      return (<div>
        <h1>人员信息</h1>
        {
          person.map((item) => {
            const { name, age, high, id } = item;
            return <Data {...item}  />
          })
        }
      </div>)

    }

  }

  class Data extends React.Component {


    render() {
      console.log(this);
      console.log(this.props);
      const { name, age, high, id } = this.props
      return (<div>

        <ul>
          <li>姓名：{name}</li>
          <li>年龄：{age}</li>
          <li>身高：{high}</li>
          <li>id :{id}</li>
        </ul>


      </div>)

    }
  }
  // console.log("Son",Son);



  //创建容器并渲染虚拟DOM

  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<App />)



</script>

</html>